<template>
  <div class="ad-picture">
    <a-row class="form-item">
      <a-col :span="4">
        <div class="label require">广告图片</div>
      </a-col>
      <a-col :span="12">
        <div class="control">
          <SImage v-model="sValue.imageUrl" :width="80" :height="80" />
          <div class="form-item-help mt-10">
            <small>建议尺寸：750*1000 或等比图片</small>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row class="form-item">
      <a-col :span="4">
        <div class="label">跳转链接</div>
      </a-col>
      <a-col :span="12">
        <div class="control">
          <SLink v-model="sValue.link" :fontSize="13" />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import PropTypes from 'ant-design-vue/es/_util/vue-types'
import { SelectImage } from '@/components'
import { SLink, SImage } from '@/views/page/modules/editor/modules'

export default {
  components: { SelectImage, SLink, SImage },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // 当前选中项的value
    value: PropTypes.any,
  },
  data () {
    return {
      sValue: {
        imageUrl: null,
        link: null
      }
    }
  },
  watch: {
    value: {
      // 首次加载的时候执行函数
      immediate: true,
      handler (val) {
        // console.log('v-model Ad', val)
        if (val) {
          this.sValue = val
        }
      }
    },
    sValue: {
      deep: true,
      handler (val) {
        // console.log('sValue Ad', val)
        this.$emit('change', val)
      }
    },
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
@import '~ant-design-vue/es/style/themes/default.less';

// 容器
.ad-picture {
  width: 600px;
  background-color: #f7f8fa;
  padding: 20px 25px;
}

.form-item {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}

// 表单元素
.control {
  position: relative;
  line-height: 40px;
  padding-left: 10px;
}

// 标签样式
.label {
  // display: inline-block;
  overflow: hidden;
  line-height: 39.9999px;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;

  &.require::before {
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 13px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
  }

  &::after {
    content: ':';
    position: relative;
    top: -0.5px;
    margin: 0 8px 0 2px;
  }
}
</style>
